<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     .box {
        color: yellow;
        background-color:  blue;
        border: 2px solid red;
     }
    </style>
</head>
<body>

    <p> 练习题    
        appendChild()  
        insertBefore()  
        removeChild()
    </p>
    <h1> Dom  改变CSS </h1>

    <div class="mydiv" onclick="mydel()">
        <p>测试1 </p>
        <p>测试2 </p>
        <p>测试3 </p>
        <p>测试4 </p>
        <p>测试5 </p>
    </div>

    <ul>
        <li>temo</li>
        <li>ez</li>        
    </ul>
</body>
<script>
function mydel(){
    let div = document.querySelector('.mydiv');
    let obj =  event.srcElement ; // div ,p 
    if( obj.tagName == 'P'){
        console.log( obj , obj.tagName);
        div.removeChild( obj )
    } 
}


 //文档中添加和移除元素 
//  let p = document.createElement('P');
//  p.innerHTML = "国服龙龟";
//  let div = document.querySelector('.mydiv');
//  let gege = document.querySelector('.gege');
 //div.appendChild( p ); 
//  div.insertBefore( p , gege )
// div.removeChild( gege )

 
//   var a =  document.querySelector('h1');
//   // 大量 css 修改
//   a.className = 'box';

// 修改 css 样式表  适合少量
//   a.style.color = 'red'
//   a.style.backgroundColor ='yellow'
//   a.style.border = '10px dashed blue'

  //如何使元素不可见。您希望元素显示或消失吗？
//   var sz =  document.querySelectorAll('h1');
//   for(let i= 1;i< sz.length; i++){ 
//     sz[i].style.display = 'none';
//   }

  // 代替上次的三个方法
//   var a =  document.querySelector('h1');
//   var a =  document.querySelector('#myh1');
//   var a =  document.querySelector('.myh2');

 //找到多个  --》数组
//   var a =  document.querySelectorAll('.myh2');  
//   console.log( a );
//   a[1].innerText = '国服龙龟';

</script>
</html>